<template>
    <div style="margin-top: 50px">
        <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
            <el-form-item label="商品品牌：" prop="brandId">
                <el-select
                        v-model="value.brandId"
                        @change="handleBrandChange"
                        placeholder="请选择品牌">
                    <el-option
                            v-for="item in brandOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品使用模板：" prop="templateId">
                <el-select
                        v-model="value.typeTemplateId"
                        @change="handleTempChange"
                        placeholder="请选择模板">
                    <el-option
                            v-for="item in templateOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品spu号：" prop="spu">
                <el-input v-model="value.spu"></el-input>
            </el-form-item>
            <!--<el-form-item :label="item.specName+'  '+':'" v-for="item in specList" :key="item.id">
                <el-checkbox-group v-model="checkedColors" @change="handleCheckedColorsChange">
                    <el-checkbox v-for="item1 in item.optionList" :label="item1.optionName" :key="item1.id">{{item1.optionName}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>-->

            <el-form-item :label="item.label+'  '+':'" v-for="item in options" :key="item.value">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-cascader
                            placeholder="试试搜索"
                            :options="item.children"
                            :props="props"
                            :filterable="filterable"
                            :show-all-levels="false"
                            @change="handleSpecs"
                    ></el-cascader>
                </div>
            </el-form-item>
            <el-form-item label="默认规格：">
            <div class="block">
                <span class="demonstration"></span>
                <el-cascader
                        placeholder="试试搜索"
                        :options="options"
                        :props="props"
                        :filterable="filterable"
                        :show-all-levels="false"
                        @change="handleDefaultSpec"
                ></el-cascader>
            </div>
            </el-form-item>

            <!--<el-form-item label="默认网络：" prop="defaultNet">-->
                <!--<el-select v-model="value" filterable placeholder="请选择">-->
                    <!--<el-option-->
                            <!--v-for="item in defaultNets"-->
                            <!--:key="item.value"-->
                            <!--:label="item.label"-->
                            <!--:value="item.value">-->
                    <!--</el-option>-->
                <!--</el-select>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="默认内存：" prop="defaultMemoCache">
                <el-select v-model="value" filterable placeholder="请选择">
                    <el-option
                            v-for="item in defaultMemoCaches"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>-->
            <el-form-item label="积分兑换：" prop="saleService">
                <el-tooltip content="积分兑换" placement="top">
                <el-switch
                        v-model="value.saleService"
                        @change="handleSale()"
                >
                </el-switch>
                </el-tooltip>
            </el-form-item>

            <el-form-item style="text-align: center">
                <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
                <el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ProductSaleDetail",
        props: {
            value: Object,

        },
        data(){
            return{
                props: { multiple: true },
                filterable:true,//开启搜索功能
                colors:'',
                color:'',
                nets:'',
                net:'',
                memorys:'',
                memory:'',
                brandOptions: [],
                templateOptions:[],
                checkedColors:[],
                checkedNetStyles:[],
                checkedmemoCache:[],
                defaultColors:[],
                defaultNets:[],
                defaultMemoCaches:[],
                specOptions:[],
                specList:[],
                optionName:'',
                options:[],

                rules: {
                    brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
                    templateId: [{required: true, message: '请选择商品使用的模板', trigger: 'blur'}],
                    spu: [{required: true, message: '请填写商品spu号', trigger: 'blur'}],
                    color: [{required: true, message: '请选择商品颜色', trigger: 'blur'}],
                    netStyle: [{required: true, message: '请选择商品网络制式', trigger: 'blur'}],
                    memoCache: [{required: true, message: '请选择商品内存容量', trigger: 'blur'}],
                    defaultColor: [{required: true, message: '请选择默认商品颜色', trigger: 'blur'}],
                    defaultNet: [{required: true, message: '请选择默认商品网络制式', trigger: 'blur'}],
                    defaultMemoCache: [{required: true, message: '请选择默认商品内存容量', trigger: 'blur'}],
                }
            }
        },
        created(){
            this.getBrandList();
            this.getTemplateList();
        },
        methods:{
            getBrandList(){
                this.service.get("/product/manage/productBrand/brandList").then(ref=>{
                    //console.log(ref);
                    if (ref.status==200) {
                        this.brandOptions = ref.data.data
                    }
                })
            },
            getTemplateList(){
                this.service.get("/product/manage/proTypeTemplation/search.do").then(res=>{
                    //console.log(res)
                    if (res.data.status == 0){
                       this.templateOptions = res.data.data.list;
                    }
                })
            },
            handleBrandChange(val) {
                this.value.brandId = val;
            },
            handleDefaultSpec(val){
                this.value.defaultItemId = '';
               // let defaultSpec = '' ;
                for (var j = 0; j < this.options.length; j++) {
                    for (var k = 0; k <this.options[j].children.length ; k++) {
                        for (var i = 0; i <val.length ; i++) {
                       //console.log(this.options[j].children[k].value);
                        if (val[i][1] == this.options[j].children[k].value){
                            if(this.options[j].label == '手机颜色'){
                                this.color = this.options[j].children[k].label
                            }
                            if(this.options[j].label == '网络制式'){
                                this.net = this.options[j].children[k].label
                            }
                            if(this.options[j].label == '机身内存'){
                                this.memory = this.options[j].children[k].label
                            }
                        }
                    }
                }
            }
                    this.value.defaultItemId =this.color+'/'+this.net+'/'+this.memory;
                //console.log(this.value.defaultItemId);
            },
            handleSpecs(val){
                //console.log(val);
                this.value.specificationItems ='';
                for (let i = 0; i <this.options.length ; i++) {
                    for (let j = 0; j <this.options[i].children.length ; j++) {
                        if (val[0] == this.options[i].children[j].value){
                            if (this.options[i].label == '手机颜色'){
                                this.colors ='';
                                for (let i = 0; i < this.options.length; i++) {
                                    if (this.options[i].label == '手机颜色'){

                                        for (let j = 0; j < this.options[i].children.length; j++) {
                                            for (let k = 0; k <val.length ; k++) {
                                                if (val[k] == this.options[i].children[j].value){

                                                    this.colors = this.colors + this.options[i].children[j].label+'/';
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            if (this.options[i].label == '网络制式') {
                                this.nets ='';
                                for (let i = 0; i < this.options.length; i++) {
                                    if (this.options[i].label == '网络制式'){
                                        for (let j = 0; j < this.options[i].children.length; j++) {
                                            for (let k = 0; k <val.length ; k++) {
                                                if (val[k] == this.options[i].children[j].value){
                                                    //console.log(this.options[i].label);

                                                    this.nets += this.options[i].children[j].label+'/';
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            if(this.options[i].label == '机身内存'){
                                this.memorys = '';
                                for (let i = 0; i < this.options.length; i++) {
                                    if (this.options[i].label == '机身内存'){
                                        for (let j = 0; j < this.options[i].children.length; j++) {
                                            for (let k = 0; k <val.length ; k++) {
                                                if (val[k] == this.options[i].children[j].value){
                                                    this.memorys += this.options[i].children[j].label+'/';
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
            handleTempChange(val){
                this.specOptions=[];
                this.value.typeTemplateId = val;
                for (let i = 0;i<this.templateOptions.length;i++){
                    if (val == this.templateOptions[i].id){

                       this.service.get("/product/manage/proTypeTemplation/search.do",{
                           params:{
                               name:this.templateOptions[i].name,
                           }
                       }).then(res=>{
                           //console.log(res);

                           if (res.data.status == 0){
                             this.specOptions = res.data.data.list[0].specIds.split(',');
                             //console.log(this.specOptions);
                               this.getSpecOptions();
                           }
                       })

                    }
                }
            },
            getSpecOptions(){
                this.specList = [];
                this.options = [];

                for (let i = 0;i < this.specOptions.length;i++){
                    this.service.get("/product/manage/proSpecification/showSpecs.do",{
                        params:{
                            specName:this.specOptions[i]
                        }
                    }).then(resp=>{
                       // console.log(resp.data.data);
                        this.specList.push(resp.data.data);
                        let specObject={
                            value:'',
                            label:'',
                            children:[],
                        };
                        specObject.value = resp.data.data.id;
                        specObject.label = resp.data.data.specName;
                        for (let j = 0;j<resp.data.data.optionList.length;j++){
                            let child={
                                value:'',
                                label:'',
                            };
                            //specObject.children = [];
                            child.value = resp.data.data.optionList[j].id;
                            child.label = resp.data.data.optionList[j].optionName;

                            specObject.children.push(child)
                        }
                        this.options.push(specObject);
                        //console.log(this.options);
                    })
                }
              //console.log( this.specList);

            },
            handleCheckedColorsChange(value) {
                console.log(value)

            },
            handleCheckedNetStylesChange(value){

            },
            handleCheckedMemoCacheChange(value){

            },
            handleSale(){
                this.value.saleService = !this.value.saleService;
                console.log(this.value.saleService);
            },
            handlePrev() {
                this.colors = this.colors.substring(0,this.colors.length-1);
                this.memorys = this.memorys.substring(0,this.memorys.length-1);
                this.nets = this.nets.substring(0,this.nets.length-1);
               this.value.specificationItems = this.colors+','+this.nets+','+this.memorys;
                this.$emit('prevStep');
                console.log(this.value.specificationItems);
            },
            handleNext(){
                this.colors = this.colors.substring(0,this.colors.length-1);
                this.memorys = this.memorys.substring(0,this.memorys.length-1);
                this.nets = this.nets.substring(0,this.nets.length-1);
                this.value.specificationItems = this.colors+','+this.nets+','+this.memorys;
                this.$emit('nextStep');
                console.log(this.value.specificationItems);
            },
        }
    }
</script>

<style scoped>

</style>